<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" @Launchform="Launchform" @clickNumber1="clickNumber1" />
    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '20px' }">
      <div style="display: flex">
        <div style="width: 65%">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">包材库存查询</span>
          </div>
          <div>
            <Table
              :tableData="TableDateList.list"
              :tableHeader="tableHeader"
              :TableHeight="100"
              :outTableHeight="180"
              @currentRow="clicktogetdata"
              :isLoading="isLoading"
            />
            <div class="mt15 f12 mb36">
              <span class="mr10">材料名称</span>
              <el-input class="mr55" v-model="materialNameVal" placeholder="" size="small" clearable @change="" style="width: 331px"> </el-input>
            </div>
          </div>
        </div>

        <div style="margin-left: 15px">
          <div shadow="never" :body-style="{ padding: '0' }">
            <div slot="header" class="mb9 f16">
              <span style="font-weight: 600">入库明细查询</span>
            </div>
            <Table
              :summaryData="summaryData1"
              summary
              :tableData="ouIntTableDate.in.list"
              :tableHeader="tableHeader2"
              :TableHeight="47"
              :outTableHeight="150"
              :isLoading="isLoading1"
            />
          </div>
          <div shadow="never" :body-style="{ padding: '0' }">
            <div slot="header" class="mb9 f16">
              <span style="font-weight: 600">出库明细查询</span>
            </div>
            <Table
              :summaryData="summaryData"
              summary
              :tableData="ouIntTableDate.out.list"
              :tableHeader="tableHeader3"
              :TableHeight="45"
              :outTableHeight="150"
              :isLoading="isLoading2"
            />
          </div>
        </div>
      </div>
      <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PackagingMaterialInventory'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import {
  PackingMaterialsInStorageDate,
  PackageMaterialStorageQueryConditionReturned,
  OutIntTableDate
} from '@/api/GeneralManager/Factoryinquiry/PackagingMaterialInventory'
import type {
  PackingMaterialsInStorage,
  PackingMaterialsOutOfStorageParameters,
  OutboundAndInboundParameters,
  outIntInterface
} from '@/api/GeneralManager/Factoryinquiry/PackagingMaterialInventory'
const formList = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '请选择物料编码',
    selectLabel: '',
    selectOptions: []
  },

  {
    type: 'date',
    dateLabel: '入库日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '收货日期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料规格',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '分类',
    inputValue: ''
  },
  {
    type: 'radio1',
    checkboxLabel: '库存大于0',
    checked: false,
    label: '1'
  },
  {
    type: 'radio1',
    checkboxLabel: '库存等于0',
    checked: false,
    label: '2'
  },
  {
    type: 'radio1',
    checkboxLabel: '全部',
    checked: true,
    label: '0'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const isLoading = ref(true)
const isLoading1 = ref(true)
const isLoading2 = ref(true)

// 计算金额总数
const summaryData = ref<summaryDataType[]>([
  {
    index: 5,
    num: 0
  }
])

// 计算金额总数
const summaryData1 = ref<summaryDataType[]>([
  {
    index: 5,
    num: 0
  }
])

interface summaryDataType {
  index: number
  num: number | undefined
}

const clicktogetdata = (row: any) => {
  isLoading1.value = true
  isLoading2.value = true
  const { mtlName, mtlNo } = row || {}
  materialNameVal.value = mtlName
  quertDate.value.mtlName = mtlName
  quertDate.value.mtlNo = mtlNo
  if (mtlName !== '' || mtlNo !== '') {
    getOutIntTableDate()
  }
}

const materialNameVal = ref('')

// 出入库数据数据
const ouIntTableDate = ref<outIntInterface>({
  in: {
    total: null,
    list: []
  },
  out: {
    total: null,
    list: []
  }
})

const quertDate = ref<OutboundAndInboundParameters>({
  mtlNo: '',
  mtlName: ''
})

const getOutIntTableDate = async () => {
  const result = await OutIntTableDate(quertDate.value)
  ouIntTableDate.value.in.list = result.in.list
  ouIntTableDate.value.out.list = result.out.list
  summaryData.value[0].num = result.in.total as number
  summaryData1.value[0].num = result.out.total!
  isLoading1.value = false
  isLoading2.value = false
}

const PackageMaterialRequestParameters = ref<PackingMaterialsOutOfStorageParameters>({
  category: '',
  inStockEndDate: '',
  inStockStartDate: '',
  lotNo: '',
  mtlName: '',
  mtlNo: '',
  mtlSpec: '',
  outStockEndDate: '',
  outStockStartDate: '',
  pageNum: 1,
  pageSize: 40,
  stock: formList.value[9].label as any
})

// 赋值数据
const TableDateList = ref<PackingMaterialsInStorage>({
  total: 0,
  list: []
})

// 获取表格数据
const PackingMaterialsInStorageDateTable = async () => {
  isLoading.value = true
  const result = await PackingMaterialsInStorageDate(PackageMaterialRequestParameters.value)
  isLoading.value = false
  TableDateList.value.list = result.list
  const { mtlName, mtlNo } = result.list[0] || {}
  quertDate.value.mtlName = mtlName
  quertDate.value.mtlNo = mtlNo
  materialNameVal.value = mtlName
  total.value = result.total
  if (mtlName !== '' || mtlNo !== '') {
    getOutIntTableDate()
  }
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

// 下拉框数据
const ObtainDataFromTheDropDownList = async () => {
  const result = await PackageMaterialStorageQueryConditionReturned()

  let newArray = <any>[]
  result.forEach((item) => {
    newArray.push(item.mtlNo + ' ' + item.mtlName)
  })
  formList.value[0].selectOptions = EvaluatesTheArrayReturnValue(newArray)
}

// 统一调用接口
const interAceFunct = () => {
  // Find下拉框数据
  ObtainDataFromTheDropDownList()
}

onMounted(() => {
  interAceFunct()
})

// 分页器
const total = ref()

const handleSizeChange = (val: number) => {
  PackageMaterialRequestParameters.value.pageNum = val
  PackingMaterialsInStorageDateTable()
}

const handleCurrentChange = (val: number) => {
  PackageMaterialRequestParameters.value.pageSize = val
  PackingMaterialsInStorageDateTable()
}

const tableHeader = ref([
  {
    label: '物料编码',
    sortable: true,
    prop: 'mtlNo'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    sortable: true
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '入库日期',
    prop: 'inDate',
    sortable: true
  },
  {
    label: '发料日期',
    prop: 'outDate',
    sortable: true
  },
  {
    label: '入库数量',
    prop: 'inQty'
  },
  {
    label: '发料数量',
    prop: 'outQty'
  },
  {
    label: '库存数量',
    prop: 'stockQty'
  }
])

const tableHeader2 = ref([
  {
    label: '指令',
    prop: 'lotNo',
    width: '92'
  },
  {
    label: '厂商',
    prop: 'vendor',
    width: '92'
  },
  {
    label: '日期',
    prop: 'slipDate',
    width: '92'
  },
  {
    label: '单据号码',
    prop: 'slipNo',
    width: '92'
  },
  {
    label: '单据类型',
    prop: 'slipReason',
    width: '92'
  },
  {
    label: '数量',
    prop: 'qty',
    width: '92'
  }
])

const tableHeader3 = ref([
  {
    label: '指令',
    prop: 'lotNo',
    width: '92'
  },
  {
    label: '部门',
    prop: 'deptName',
    width: '92'
  },
  {
    label: '日期',
    prop: 'slipDate',
    width: '92'
  },
  {
    label: '单据号码',
    prop: 'slipNo',
    width: '92'
  },
  {
    label: '单据类型',
    prop: 'slipReason',
    width: '92'
  },
  {
    label: '数量',
    prop: 'qty',
    width: '92'
  }
])

const Launchform = (val: any) => {
  PackageMaterialRequestParameters.value.mtlNo = val[0].selectValue?.split(' ')[0]?.trim()
  PackageMaterialRequestParameters.value.inStockStartDate = val[1].dateValue[0]
  PackageMaterialRequestParameters.value.inStockEndDate = val[1].dateValue[1]
  PackageMaterialRequestParameters.value.outStockStartDate = val[2].dateValue[0]
  PackageMaterialRequestParameters.value.outStockEndDate = val[2].dateValue[1]
  PackageMaterialRequestParameters.value.mtlSpec = val[3].inputValue
  PackageMaterialRequestParameters.value.mtlName = val[4].inputValue
  PackageMaterialRequestParameters.value.lotNo = val[5].inputValue
  PackageMaterialRequestParameters.value.category = val[6].inputValue
  formList.value[4].inputValue = val[0].selectValue?.split(' ')[1]?.trim()
  PackingMaterialsInStorageDateTable()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    } else if (item.type === 'select') {
      item.selectValue = ''
    }
  })
}

const clickNumber1 = (val: any) => {
  PackageMaterialRequestParameters.value.stock = val
  PackingMaterialsInStorageDateTable()
}
</script>

<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: end;
  margin: 10px 20px 10px;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}
</style>
